<template>
    <div class="oppositeSideInfo">
        <!-- 输入车牌组件 -->
        <CarKey ref="carKey" @getCarNo="getCarNo"></CarKey>
        <p class="title">对方驾驶人及车辆信息</p>
        <div class="infoSec">
            <div class="menu">
                <div>
                    <p class="text" @click="click(0)" :class="{selected_t:params.isShow === 0}">协助对方录入</p>
                    <p class="line" :class="{selected:params.isShow === 0}"></p>
                </div>
                <div>
                    <p class="text" @click="click(1)" :class="{selected_t:params.isShow === 1}">对方录入</p>
                    <p class="line" :class="{selected:params.isShow === 1}"></p>
                </div>
            </div>
            <div class="infoSecDetails" v-if="params.isShow === 0">
                <div class="info-rows">
                    <div>车牌号码</div>
                    <input ref="cameraRco" capture="camera" accept="image/jpeg,image/jpg" type="file" @change="addImg()" style="display:none">
                    <div class="wrap-sec w2_4">
                        <input @click="chooseCarId" v-model.trim="params.carNo" onfocus="this.blur()" unselectable="on" class="w2_4" type="text" placeholder="请输入车牌">
                        <span id="camera" class="camera" @click="recognizeCar"></span>
                    </div>
                </div>
                <div class="info-rows add-border-top">
                    <div>姓名</div>
                    <input v-model.trim="params.driverName" class="w2_4" type="text" placeholder="请输入姓名">
                </div>
                <div class="info-rows add-border-top">
                    <div>责任认定</div>
                    <input class="w2_4" onfocus="this.blur()" unselectable="on" type="text" readonly v-model="params.dutyPercentTxt">
                </div>
                <div class="info-rows add-border-top">
                    <div>手机号码</div>
                    <input maxlength="11" v-model.trim="params.mobile" class="w2_4" type="tel" placeholder="请输入手机号">
                </div>
                <div class="info-rows add-border-top">
                    <div>验证码</div>
                    <div class="wrap-sec w2_4">
                        <input maxlength="4" v-model.trim="params.mobileCode" class="w1_5" type="tel" placeholder="请任意输入4位数字">
                        <button class="code-btn" @click="getCode">{{params.codeTxt}}</button>
                    </div>
                </div>
            </div>
            <!-- 二维码展示区 -->
            <div class="codePicSec" v-if="params.isShow === 1">
                <div class="codePic" id="codePic" ref="codePic">
                    <qrcode-vue v-model="params.value" :size='params.size'></qrcode-vue>
                </div>
                <p class="f012">请对方扫描二维码录入信息</p>
            </div>
        </div>
        <mu-container class="button-wrapper" :class="{isShowBtn:params.isShow === 1}">
            <mu-button @click="clickSubmit" color="#6794F5" full-width>提交</mu-button>
        </mu-container>

        <!-- loading界面  等待对方用户提交信息 -->
        <div class="loading-container" :class="{isShowLoading:params.isShowLoading === 0}">
            <div class="ctr-sec">
                <div class="loading-Wrap">
                    <img class="loading-img" src="../../assets/img/loading-bg.png" alt="">
                    <p class="f015">等待对方用户提交信息...</p>
                    <p class="f012 fc_AEB3B7">若对方不配合，可拨打110获得协助</p>
                    <span class="close" @click="close()">X</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {http} from '../../utils/request.js';
    import api from '../../api/index.js';
    import CarKey from '../../components/carKey/carKey';
    import {getImgToken, upLoadImg, getOCRResult, compressImg} from 'utils/commonUtil.js';
    import QrcodeVue from 'qrcode.vue';
    export default{
        components: {
            QrcodeVue,
            CarKey
        },
        name: "oppositeSideInfo",
        data() {
            return {
                params: {
                    accidentNo: '',
                    fromTo: '',
                    dutyPercent: '', //责任比例
                    dutyPercentTxt: '',
                    isShow: 0,
                    carNo: "", // B方车牌
                    driverName: "", // 对方姓名
                    mobile: "", // 对方电话
                    mobileCode: "", // 手机验证码
                    value: '测试二维码的显示功能是否正常',
                    size: '200',
                    carStatus: '0',
                    fromTo: '0',
                    carId: '',
                    timeFlag: true,
                    codeTxt: '获取验证码',
                    isShowLoading: 0,                    
                    timer:"", // 定时器
                    isScan: ''
                },
            }
        },
        mounted() {            
            document.title = '智能定责';
            sessionStorage.setItem('pageOrignCheng','a');
        },
        methods: {
            chooseCarId() {
                this.$refs.carKey.openKey();
            },
            getCarNo(value) {
                this.params.carNo = value;
                this.$refs.carKey.closeKey();
            },
            //选项卡控制 
            click(param) {
                if(param != this.params.isShow) {
                    this.params.isShow = param;
                };

                // 二维码显示的时候，启动定时器
                if(param == 1) {                   
                    // clearInterval(this.params.timer)  
                    this.startTimer(); 
                } else if (param == 0) {
                    //  关闭定时器
                    clearInterval(this.params.timer)
                }
            },
            // 定时器
            startTimer() {
                var that = this;
                that.params.timer = setInterval(function() {
                    that.showOrHide();
                    if (that.params.isScan == 1) {
                        that.params.isShowLoading = 1;
                    } else if (that.params.isScan == 2) {
                        that.params.isShowLoading = 0;
                    } 
                    if (that.params.carStatus == 9) {  // B方同意
                        clearInterval(that.params.timer);
                        that.$router.push({
                            name: 'supplement',
                            query: {
                                accidentNo: that.params.accidentNo,
                                carId: that.$route.query.carId,     //  A方carId   
                                pageOrignCheng:'a'                             
                            }
                        });
                    } else if (that.params.carStatus == 10) {  //  B方不同意
                        clearInterval(that.params.timer);
                        that.$router.push({
                            name: 'supplement',
                            query: {
                                accidentNo: that.params.accidentNo,
                                fromPage: "oppositeSideInfo"
                            }
                        })                            
                    }
                }, 3000);
            },

            // B方扫码后的状态
            showOrHide() {
                http.post(api.API_QUERY_B_INFO, {
                    accidentNo: this.params.accidentNo, //事故编号
                    fromTo: this.params.fromTo
                }).then(((res) => {
                    if(res.code == 1) {
                        this.params.isScan = res.resultObj.isScan;  
                        this.params.carStatus = res.resultObj.carStatus;   
                        console.log(this.params.carStatus);                   
                    } else if (res.code == 0) {
                        this.$toast.message({
                            message: res.message,
                            color: '#F57979'
                        });
                    } else {
                        alert ("系统异常")
                    }
                })).catch((error) =>{
                    console.log(error);
                });
            },

            //格式校验
            checkFormat() {

                var reg_mobile = /^1[3,4,5,6,7,8,9]\d{9}$/; // 校验电话号码格式
                // var reg_carNo = /^[\u4e00-\u9fa5][A-Za-z][A-Za-z0-9]{5}$/; // 校验普通蓝牌车，车牌长度为5，注意：新能源车牌应将长度改为6。
                var reg_carNo = /^[\u4e00-\u9fa5][A-Za-z][A-Za-z0-9]/; // 校验车牌，不限长度                

                if(!(reg_carNo.test(this.params.carNo) && (this.params.carNo.length == 6 || this.params.carNo.length == 7))) {
                     this.$toast.message({
                      message: '请按照提示输入正确的车牌',
                      color: '#F57979'
                    });
                    return false;
                };
                if(this.params.driverName == '') {
                    this.$toast.message({
                      message: '请输入姓名',
                      color: '#F57979'
                    });
                    return false;
                }
                if(!reg_mobile.test(this.params.mobile)) {
                    this.$toast.message({
                      message: '请按照提示输入正确的手机号码',
                      color: '#F57979'
                    });
                    return false;
                };
                if(this.params.mobileCode.length!=4) {
                    this.$toast.message({
                      message: '请按照提示输入正确的验证码',
                      color: '#F57979'
                    });
                    return false;
                };
                return true;
            },

            // 查询事故B方基本信息
            queryAccidentB() {
                console.log("请求B数据，accidentNo:" + this.params.accidentNo + ",fromTo:" + this.params.fromTo);
                http.post(api.API_QUERY_B_INFO,{
                    accidentNo: this.params.accidentNo, //事故编号
                    fromTo: this.params.fromTo
                }).then(((res) => {
                    console.log(res);
                    if(res.code == 1) {
                        this.params.carId = res.resultObj.carId;
                        this.params.dutyPercent = res.resultObj.dutyPercent;
                        this.params.dutyPercentTxt = this.getDutyPercent(res.resultObj.dutyPercent);
                        this.params.carNo = res.resultObj.carNo;
                        this.params.driverName = res.resultObj.driverName;          
                        this.params.mobile = res.resultObj.mobile;          
                        this.params.value = window.location.origin + window.location.pathname + '#/intelligentResult_B?'+'carId=' + this.params.carId +'&accidentNo=' + this.params.accidentNo +'&fromTo=' +  this.params.fromTo;
                        console.log(this.params.value);
                    } else if (res.code == 0) {
                        this.$toast.message({
                            message: res.message,
                            color: '#F57979'
                        });
                    } else {
                        alert ("系统异常")
                    }
                })).catch((error) =>{
                    console.log(error);
                });
            },

            // 点击提交
            clickSubmit() {
                if(!this.checkFormat()) return;
                http.post(api.API_ACCIDENT_UPDATE, {
                    accidentNo: this.params.accidentNo,
                    carId: this.params.carId,
                    carStatus: '9',
                    fromTo: this.params.fromTo,
                    carNo: this.params.carNo,
                    driverName: this.params.driverName,
                    dutyPercent: this.params.dutyPercent,
                    mobile: this.params.mobile,
                    isScan: 0    //   A帮B录入信息时
                }).then(((res) => {
                    if(res.code == 1) {
                        console.log(res.message);
                        this.$router.push({
                            name:"supplement",
                            query: {
                                accidentNo: this.params.accidentNo,
                                fromPage: "oppositeSideInfo"
                            }
                        });
                    } else if (res.code == 0) {
                        this.$toast.message({
                            message: res.message,
                            color: '#F57979'
                        });
                    } else {
                        alert ("系统异常")
                    }
                })).catch((error) => {
                    console.log(error);
                })
            },

            // 判断责任比例
            getDutyPercent(e) {
                if(e == "1") {
                    return "全责";
                } else if (e == "2") {
                    return "主责";
                } else if (e == "3") {
                    return "同责";
                } else if (e == "4") {
                    return "次责";
                } else if (e == "5") {
                    return "无责";
                }
            },

             //获取验证码
            getCode() {
                //防止重复提交
                if(!this.params.timeFlag) return;
                this.params.timeFlag = false;
                let NUM = 59;
                const timer = setInterval(()=>{
                    this.params.codeTxt = "重新发送("+ NUM + ")";
                    if(NUM==0) {
                        this.params.codeTxt = "重新发送";
                        this.params.timeFlag = true;
                        clearInterval(timer);
                    };
                    NUM--;
                },1000);
            },

            //智能识别车牌
            getCarResult(obj) {
                getOCRResult("03",obj.id).then((res)=>{
                    if(res.code=="1" && res.resultObj && res.resultObj.result) {
                        const result = res.resultObj.result.result;
                        for(var val of result) {
                            this.params.carNo = result[val][0][0];
                        };
                    }
                }).catch((error) =>{
                    console.log(error);
                });
            },

            //测试用
            printSomething() {
                console.log(1);
            },
            //上传图片用
            recognizeCar() {
                this.$refs.cameraRco.click();
            },
            addImg() {
                const params = {};
                params.timestamp = Date.now();
                const file = event.target.files[0];
                compressImg(file).then((res)=>{
                    params.file = res.file;
                    console.log(res.file);
                    return getImgToken();
                }).then(res=>{
                    params.token = res.resultObj;
                    return upLoadImg(params)
                }).then(res=>{
                    this.getCarResult(res.key);
                });
            },
            //只能识别车牌
            getCarResult(key) {
                getOCRResult("03",key).then((res)=>{
                    if(res.code=="1" && res.resultObj && res.resultObj.result) {
                        const result = res.resultObj.result.result;
                        for(var val in result) {
                            this.params.carNo = result[val][0][0];
                        };
                    }
                }).catch((error) =>{
                    console.log(error);
                });
            },
            // 点击关闭等待层
            close() {
                clearInterval(this.params.timer)
                this.params.isShowLoading = 0;
                console.log(this.params.carId);
                http.post(api.API_SCAN, {
                    carId: this.params.carId,
                    scanStatus: '2'  //  A关闭弹窗提示时
                }).then(((res) => {
                    if(res.code == 1) {
                       console.log('A方已关闭等待遮罩层');
                    } else if (res.code == 0) {
                        
                    } else {
                        alert ("系统异常")
                    }
                    this.params.isScan = 2;
                    this.startTimer()
                })).catch((error) => {
                    console.log(error);
                })

            }
        },
        mounted () {
            this.params.accidentNo = this.$route.query.accidentNo;
            // this.params.fromTo = this.$route.query.fromTo;
            
            console.log("拿参数，accidentNo:" + this.params.accidentNo + ",fromTo:" + this.params.fromTo);
            this.queryAccidentB();
        },
        // watch: {
        //     $route(to, from){
        //         alert(to);
        //     }                
        // }
    }
</script>
<style lang="scss" scoped>
    @import "~assets/css/mixin.scss";
    .oppositeSideInfo {
        width: 100%;
        height: 100%;        
        background-color: rgb(245, 246, 248);
    }
    .infoSec {
        background-color: #fff;
    }
    .title {
        font-size: 0.12rem;
        color: #85898D;
        /* line-height: 0.34rem; */
        padding: 0.15rem 0.1rem 0.1rem;
    }
    .menu {
        width: 48%;
        margin: 0 auto; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.15rem;
        line-height: 0.4rem;
        color: #85898D;
    }
    .menu .line {
        width: 0.25rem;
        height: 2px;
        background-color: #fff;
        margin: 0 auto;
    }
    .menu .selected {
        background-color: #5898F8;
    }
    .selected_t {
        color: #5898F8;
    }
    .isShowBtn {
        display: none;
    }
    .infoSecDetails {
        border-top: 1px solid #D8D8D8;
        padding: 0 0 0 0.15rem;
    }
    .info-rows {
        padding: 0 0.15rem 0 0;
        font-size: 0.16rem;
        color: #3D4042;
    }
    .add-border-top {
        border-top: 1px solid #eee;
    }  
    .w2_4 {
        width: 2.4rem;
    }
    .wrap-sec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }   
    .camera {
        display: inline-block;
        width: 0.22rem;
        height: 0.2rem;        
    }
    .camera {
        background: url(../../assets/img/camera.png) no-repeat;
        background-size: 100% 100%;
        // margin-right: 0.2rem;
    }
    .arrows {
        background: url(../../assets/img/arrows.png) no-repeat;
        background-size: 100% 100%;
    }
    .info-rows input {
        border: none;
        height: 0.5rem;
        font-size: 0.16rem;
        color: #3D4042;
    }
    .code-btn {
        width: 0.8rem;
        height: 0.34rem;
        background-color: #F0F0F0;
        border-radius: 4px;
        color: #CBCBCB;
        font-size: 0.12rem;
        outline: none;
        border: none;
    }
    .w1_5 {
        width: 1.5rem;
    }
    .codePicSec {
        width: 100%;
        height: auto;
        padding: 0.3rem 0 0;
        border-top: 1px solid #D8D8D8;
    }
    .codePic {
        width: 2.62rem;
        height: 2.62rem;
        margin: 0 auto;
        background-color: #fff;
        border: 1px solid rgb(196, 196, 196);
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.1rem;
    }
    .codePic>div {
        margin: 0 auto;
    }
    .codePicSec .f012 {
        text-align: center;
        line-height: 0.34rem;
        color: #85898D;
    }
    .button-wrapper {
        padding: 0.3rem 0.1rem;
        background-color: #fff;
    }
    .button-wrapper button {
        font-size: 0.18rem;
    }
    ::-webkit-input-placeholder { /* WebKit browsers */ 
        font-size: 0.16rem;
        color: #8D9093;
    } 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
        font-size: 0.16rem;
        color: #8D9093;
    } 
    ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
        font-size: 0.16rem;
        color: #8D9093;
    } 
    :-ms-input-placeholder { /* Internet Explorer 10+ */ 
        font-size: 0.16rem;
        color: #8D9093;
    }
    
    .loading-container {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
    }
    .isShowLoading {
        display: none;
    }
    .ctr-sec {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .loading-Wrap {
        width: 2.7rem;
        height: 3.4rem;
        background-color: #fff;
        border-radius: 0.05rem;
        margin: 0 auto;
        position: relative;
    }
    .loading-img {
        display: inline-block;
        width: 1.88rem;
        height: 2.2rem;
        margin: 0.2rem auto;
    }
    .loading-Wrap .f015 {
        font-weight: 700;
    }
    .f015 {
        font-size: 0.15rem;
        color: #3D4042;
    }
    .f012 {
        font-size: 0.12rem;
    }
    .fc_AEB3B7 {
        color: #AEB3B7;
        margin: 0.15rem auto;
    }
    .close {
        position: relative;
        display: inline-block;
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 0.16rem;
        top: 0.5rem;
        border: 2px solid white;
        line-height: 0.32rem;
        font-size: 0.2rem;
        color: white;
    }
</style>

